import { ref } from "vue";
import {
    GetTemplateCategory,
    GetTemplate,
    GetBanner,
    GetTemplateType,
} from "@/api";

export const useContent = () => {
    const keyword = ref("");
    const cateActive = reactive([0, 0, 0]);
    const cateActive2 = reactive([0, 0, 0]);
    // const industryActive = ref(0);
    // const areaActive = ref(0);
    const bannerList = ref([]);
    const typeCateList = ref([]);
    const areaCateList = ref([]);
    const industryCateList = ref([]);
    const searchRef = ref(null);

    const cate2 = ref([]);

    const list = ref([]);
    const allList = reactive({});
    const allLoading = reactive({});
    const pagination = ref({
        size: 48,
        page: 1,
    });
    const filterRef = ref(null);
    const isLoading = ref(true);
    const topTabActive = ref(0);
    const cateList = ref([]);
    const topList = ref([]);
    const userStore = useUserStore();

    useSeoMeta({
        title: "3d云展厅_VR产品展示_3D元宇宙场景在线制作-北京华锐云空间",
        description:
            "华锐云空间是专业的三维数字空间搭建平台，提供3D展厅/展馆/展品/展会/展台线上制作工具，可快速编辑和生成三维展厅，500+模板任选。电话：13611042909",
        keywords: "vr展馆,3d全景漫游,网上展厅,虚拟展会,3D云展厅",
    });

    const pageChangeHandle = (page) => {
        pagination.value.page = page;
        filterRef.value.scrollIntoView();
    };

    const GetAllTemplate = async (id) => {
        allLoading[id] = true;
        const res = await GetTemplate({
            template_type_id: id,
        });
        allLoading[id] = false;
        if (res.code == 200) {
            allList[id] = res.data;
        } else {
            allList[id] = [];
        }
    };

    const GetAllList = async () => {
        for (let item of cateList.value) {
            GetAllTemplate(item.id);
        }
    };

    const GetList = async () => {
        isLoading.value = true;
        let active = topTabActive.value;
        let params = {};
        let template_type_id = topList.value[topTabActive.value].id;

        if (topList.value[active].code == "template") {
            params = {
                category_ids: cateActive.join(","),
                template_type_id,
            };
        } else if (topList.value[active].code == "courseware") {
            const isOtherTemplate = String(cateActive2[0]).includes('kj_');

            params = {
                one_category_id: isOtherTemplate ? 0 : cateActive2[0],
                two_category_id: cateActive2[1],
                template_type_id: isOtherTemplate ? String(cateActive2[0]).replace('kj_', '') : template_type_id,
            };
        } else {
            params = {
                template_type_id,
            };
        }
        const res = await GetTemplate({
            name: keyword.value,
            ...params,
        });

        isLoading.value = false;
        if (res.code == 200) {
            list.value = res.data;
        }
    };

    const handleTypeClick = (index, id) => {
        pagination.value.page = 1;
        if (topList.value[topTabActive.value].code == "template") {
            cateActive[index] = id;
        } else if (topList.value[topTabActive.value].code == "courseware") {
            cateActive2[index] = id;
            if (index == 0) {
                cateActive2[1] = 0;
            }
        }
        searchRef.value?.clear();
        GetList();
    };

    const onSearch = (value) => {
        keyword.value = value;
        pagination.value.page = 1;
        GetList();
    };

    const getBanner = async (category_id) => {
        const res = await GetBanner({ category_id });
        if (res.code == 200) {
            bannerList.value = res.data;
        }
    };

    const getTemplateCategory = async () => {
        let active = topTabActive.value;
        if (topList.value[active].code === -1) return;

        const res = await GetTemplateCategory({
            type: topList.value[active].code,
        });
        if (res.code == 200) {
            if (topList.value[active].code == "template") {
                typeCateList.value = res.data[0].child;
                areaCateList.value = res.data[1].child;
                industryCateList.value = res.data[2].child;
            } else if (topList.value[active].code == "courseware") {
                cate2.value = [
                    ...res.data,
                    {
                        id: 'kj_7',
                        name: "冶金模板",
                        child: [],
                    },
                    ...userStore.userInfo.level == 3 ?
                        [
                            {
                                id: 'kj_4',
                                name: "消防模版",
                                child: [],
                            },
                            {
                                id: 'kj_5',
                                name: "湛江模板",
                                child: [],
                            },
                            {
                                id: 'kj_6',
                                name: "厦门电力模板",
                                child: [],
                            },
                            {
                                id: 'kj_9',
                                name: "医疗模板",
                                child: [],
                            },
                            // {
                            //     id: 'kj_10',
                            //     name: "水务行业",
                            //     child: [],
                            // }
                        ] : []
                ];
            }
        }
    };

    const GetType = async () => {
        // const res = await GetTemplateType();
        const { typeList } = useTemplate();

        // if (res.code == 200) {
        cateList.value = typeList;

        topList.value = [-1, ...typeList].map((item, index) => {
            if (item === -1) {
                return {
                    label: "全部模版",
                    value: 0,
                    id: -1,
                    code: -1,
                };
            }
            return {
                label: item.name,
                value: index,
                id: item.id,
                code: item.code,
            };
        });
        // }
    };

    const onSeeMore = (index) => {
        topTabActive.value = index + 1;
    };

    const GetIndustry = () => {
        if (cateActive2[0] == 0) return [];
        else {
            return cate2.value.find((item) => item.id == cateActive2[0]).child;
        }
    };

    watch(topTabActive, async () => {
        cateActive[0] = 0;
        cateActive[1] = 0;
        cateActive[2] = 0;
        cateActive2[0] = 0;
        cateActive2[1] = 0;
        cateActive2[2] = 0;
        pagination.value.page = 1;

        searchRef.value?.clear();

        isLoading.value = true
        list.value = []
        if (topList.value[topTabActive.value].code == -1) {
            await GetAllList();
        } else {
            await getTemplateCategory();
            await GetList();
        }
    });

    return {
        searchRef,
        keyword,
        cateActive,
        cateActive2,
        bannerList,
        cateList,
        topTabActive,
        topList,
        typeCateList,
        areaCateList,
        industryCateList,
        cate2,
        list,
        allList,
        allLoading,
        pagination,
        filterRef,
        isLoading,
        GetAllList,
        onSeeMore,
        GetList,
        pageChangeHandle,
        handleTypeClick,
        onSearch,
        getTemplateCategory,
        GetType,
        getBanner,
        GetIndustry,
    };
};
